<template>
    <div>
        <!--使用mintui的header组件做头部-->
        <mt-header title="vue2.0商城">
            <mt-button icon="back" :slot="isshow" @click="back">返回</mt-button>
        </mt-header>
        <!--中部内容使用router-view占位-->
        <router-view></router-view>
        <!--使用mui来做底部-->
        <nav class="mui-bar mui-bar-tab">
            <router-link class="mui-tab-item" to="/home">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </router-link>
            <router-link class="mui-tab-item" to="#tabbar-with-chat">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">会员</span>
            </router-link>
            <router-link class="mui-tab-item" to="/shopcar">
                <span class="mui-icon mui-icon-contact"><span class="mui-badge" id="badge">{{total}}</span></span>
                <span class="mui-tab-label">购物车</span>
            </router-link>
            <router-link class="mui-tab-item" to="/search">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">搜索</span>
            </router-link>
        </nav>

    </div>
</template>

<script>
    import {vm, COUNTSTR} from "./kits/vm"
    import {getTotal} from './kits/storeData'

    //实时更新购物车中的商品总数
    vm.$on(COUNTSTR, function (count) {
        var badge = document.getElementById("badge");
        badge.innerText = parseInt(badge.innerText) + count;
    });
    export default{
        data() {
            return {
                isshow: 'left',
                total: 0
            }
        },
        created() {
            this.getCount();
        },
        methods: {
            getCount() {//从本地localstorage中获取到商品总数并初始化到total属性中
                let totalObj = getTotal();
                let totalCount = 0;
                for (var k in totalObj) {
                    totalCount += totalObj[k];
                }
                this.total = totalCount;
            },
            back() {
                this.$router.go(-1);
            }
        },
        watch: {
            "$route": function (newval, oldval) {
//                console.log(newval);
                if (newval.path.toLowerCase() === "/home") {
                    this.isshow = ""
                } else {
                    this.isshow = "left"
                }
            }
        }
    }


</script>

<style scoped></style>